<!-- C:\Users\王硕\Desktop\毕设\housing-rental-system-frontend\src\components\Navbar.vue -->
<template>
  <div id="app">
    <div
      class="hover-area"
      @mouseover="showNavbar"
      @mouseout="handleHoverOut"
    ></div>
    <nav
      :class="['navbar', { show: isNavbarVisible }]"
      @mouseover="mouseOverNavbar"
      @mouseout="mouseOutNavbar"
    >
      <!-- 品牌标识区 -->
      <div class="navbar-brand">
        <router-link to="/" class="brand-logo">
          <span class="brand-name">租赁房源系统</span>
        </router-link>
      </div>

      <!-- 导航菜单 -->
      <div class="navbar-menu">
        <div class="navbar-start">
          <router-link
            to="/"
            class="nav-item"
            :class="{ active: $route.path === '/' }"
          >
            首页
          </router-link>
          <router-link
            to="/news"
            class="nav-item"
            :class="{ active: $route.path === '/news' }"
          >
            房屋资讯
          </router-link>
          <router-link
            to="/feedback"
            class="nav-item"
            :class="{ active: $route.path === '/feedback' }"
          >
            用户反馈
          </router-link>
        </div>

        <!-- 右侧操作区 -->
        <div class="navbar-actions">
          <div v-if="!user" class="auth-buttons">
            <button class="login-btn" @click="navigateToLogin">登录</button>
            <button class="register-btn" @click="navigateToRegister">
              注册
            </button>
          </div>
          <UserMenu v-else />
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/user";
import UserMenu from "@/components/UserMenu.vue";

export default {
  components: {
    UserMenu,
  },
  setup() {
    const router = useRouter();
    const userStore = useUserStore();

    const user = computed(() => {
      return userStore.userInfo?.id ? userStore.userInfo : null;
    });
    // 导航栏显隐控制
    const isNavbarVisible = ref(false);
    let hideTimer = null;

    // 鼠标事件处理
    const showNavbar = () => {
      clearTimeout(hideTimer);
      isNavbarVisible.value = true;
    };

    const handleHoverOut = () => {
      hideTimer = setTimeout(() => {
        isNavbarVisible.value = false;
      }, 100);
    };

    const mouseOverNavbar = () => {
      clearTimeout(hideTimer);
      isNavbarVisible.value = true;
    };

    const mouseOutNavbar = () => {
      hideTimer = setTimeout(() => {
        isNavbarVisible.value = false;
      }, 100);
    };

    // 导航方法
    const navigateToLogin = () => {
      console.log("尝试跳转到登录页");
      router.push("/login");
    };
    const navigateToRegister = () => router.push("/register");

    return {
      user,
      isNavbarVisible,
      showNavbar,
      handleHoverOut,
      mouseOverNavbar,
      mouseOutNavbar,
      navigateToLogin,
      navigateToRegister,
    };
  },
};
</script>

<style scoped>
/* 用户菜单样式 */
.user-menu-container {
  position: relative;
  cursor: pointer;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  transition: background 0.3s;
  border-radius: 4px;
}

.user-info:hover {
  background: #f5f5f5;
}

.avatar-wrapper {
  margin-right: 8px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 500;
}

.username {
  font-size: 14px;
  color: #333;
  margin-right: 8px;
}

.arrow-down {
  transition: transform 0.3s;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")
    no-repeat;
}

.arrow-down.rotate {
  transform: rotate(180deg);
}

/* 下拉菜单样式 */
.dropdown-menu {
  position: absolute;
  right: 0;
  top: 40px;
  width: 160px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.menu-item {
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  transition: all 0.3s;
}

.menu-item:hover {
  background: #f5f5f5;
  color: #1890ff;
}

.menu-divider {
  height: 1px;
  background: #e8e8e8;
  margin: 4px 0;
}

.logout {
  color: #ff4d4f;
}

.logout:hover {
  background: #fff1f0;
}

/* 菜单动画 */
.menu-slide-enter-active,
.menu-slide-leave-active {
  transition: all 0.3s;
}

.menu-slide-enter-from,
.menu-slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* 导航栏容器 */
.navbar {
  position: fixed;
  top: -60px; /* 初始位置在屏幕上方 */
  width: 100%;
  height: 60px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between; /* 确保内容两端对齐 */
  padding: 0 32px;
  z-index: 1000;
  transition: top 0.3s ease-in-out; /* 添加过渡效果 */
}

.navbar.show {
  top: 0; /* 显示时的位置 */
}

/* 品牌标识 */
.navbar-brand {
  margin-right: 48px;
}

.brand-logo {
  text-decoration: none; /* 去除下划线 */
}

.brand-name {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  letter-spacing: 1px;
}

/* 导航菜单容器 */
.navbar-menu {
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
}

/* 导航项样式 */
.navbar-start {
  display: flex;
  gap: 32px;
}

.nav-item {
  color: #4a5568;
  font-size: 16px;
  transition: all 0.3s ease;
  position: relative;
  padding: 8px 0;
  text-decoration: none;

  &:hover {
    color: #3498db;
  }

  &.active {
    color: #3498db;
    font-weight: 500;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: #3498db;
      animation: underline 0.3s ease;
    }
  }
}

/* 操作按钮区 */
.navbar-actions {
  display: flex;
  gap: 30px;
  margin-left: auto;
}

.login-btn,
.register-btn {
  padding: 8px 24px;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  margin-right: 50px;
}

.login-btn {
  background: #3498db;
  color: white;

  &:hover {
    background: #2980b9;
    transform: translateY(-1px);
  }
}

.register-btn {
  background: #e74c3c;
  color: white;

  &:hover {
    background: #c0392b;
    transform: translateY(-1px);
  }
}

/* 下划线动画 */
@keyframes underline {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .navbar {
    padding: 0 16px;
  }

  .navbar-start {
    gap: 16px;
  }

  .nav-item {
    font-size: 14px;
  }

  .login-btn,
  .register-btn {
    padding: 6px 18px;
  }

  .navbar-actions {
    margin-left: 16px;
  }
}

@media (max-width: 576px) {
  .navbar-menu {
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-start {
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-actions {
    margin-top: 16px;
    flex-direction: column;
    align-items: flex-end;
  }

  .nav-item {
    margin-bottom: 8px;
  }

  .login-btn,
  .register-btn {
    margin-bottom: 8px;
  }
}

/* 鼠标悬停区域 */
.hover-area {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px; /* 悬停区域的高度可以根据需要调整 */
  cursor: pointer;
  z-index: 999;
}
.navbar-actions {
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* 用户信息样式 */
.user-info {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.3s;
}

.user-info:hover {
  background: #f5f5f5;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}

.username {
  font-size: 14px;
  color: #333;
}
</style>
